<template>
  <a-modal v-model:visible="visible" title="驳回理由" width="600px">
    <div class="user-info">
      用户信息: <span>{{ userInfo.showPersion }}</span>
    </div>
    <div class="rejection-title">请填写驳回理由(必填)：</div>
    <a-textarea v-model="rejectinfo" style="height: 500px" placeholder="请输入驳回理由" allow-clear />
    <template #footer>
      <a-button @click="visible = false">取消</a-button>
      <a-popconfirm @ok="confirm" content="确定是否提交驳回理由？">
        <a-button type="primary">确定</a-button>
      </a-popconfirm>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { keywordListUpdate } from '@/apis'

const rejectinfo = ref('')
const props = defineProps({
  userInfo: {
    type: Object,
    default: {}
  }
})
const emits = defineEmits(['handleSuccess'])
const visible = ref(false)

const confirm = async () => {
  if (rejectinfo.value.trim() === '') {
    Message.error('驳回理由不能为空')
    return
  }
  let formData = new FormData()
  formData.append('keyword_id', props.userInfo.keyword_id)
  formData.append('detailed', rejectinfo.value)
  keywordListUpdate(formData, 'keyword_rejection').then((res) => {
    try {
      let resData = JSON.parse(res)
      if (resData.code === 200) {
        Message.success('驳回成功')
        visible.value = false
        emits('handleSuccess')
      } else {
        Message.error('驳回失败')
      }
    } catch (err) {
      Message.error('驳回失败')
    }
  })
}

const show = (id: string) => {
  rejectinfo.value = ''
  visible.value = true
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
.rejection-title {
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
}
.user-info {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
}
</style>
